<template>
  <div class="side-pest-zh">
    <div class="side-pest-title">选择虫报站</div>
    <div class="side-pest-menu">
      <div
        v-for="(item,index) in pestStationList"
        :key="index"
        class="pest-menu-item"
        :class="index === nowpestStationindex?'pest-menu-item-selected':''"
        @click="clickpeststation(item,index)"
      >
        {{ item.deviceName }}
      </div>
    </div>
  </div>
</template>
<script>
import nowpagereq from "@/api/digital-production/pest-management/insect-alert"
export default {
  data() {
    return {
      pestStationList: [],
      nowpestStationindex: 0
    }
  },
  mounted() {
    this.getinsectDevice()
  },
  methods: {
    // 点击虫报站
    clickpeststation(e, index) {
      this.nowpestStationindex = index
      this.$emit('peststation', e)
    },
    // 获取虫报站信息
    // 获取虫报站信息
    getinsectDevice() {
      nowpagereq.getinsectDevice().then(
        res => {
          this.pestStationList = res.data
          this.clickpeststation(this.pestStationList[0], 0)
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.side-pest-zh{
    width: 220px;
    height: 100%;
    margin: 1px 5px;
    font-size: 16px;
    .side-pest-title{
        width: 200px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-bottom:dashed #82e5ff 1px;
        margin: 5px auto;
    }
    .side-pest-menu{
        height: calc(100% - 45px);
        width: 220px;
        margin-top:5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: auto;
        .pest-menu-item{
            width: 190px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            margin-bottom: 10px;
            border: 1px #fff solid;
        }
        .pest-menu-item:hover{
             background-image: linear-gradient(to bottom,#43e5f7,#24bbca,#0f9fab);
        }
        .pest-menu-item-selected{
             background-image: linear-gradient(to bottom,#43e5f7,#24bbca,#0f9fab);
        }
    }
}
</style>
